<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>天空盒子</title>
	<style>
		body {
			margin: 0;
			overflow: hidden;
			/* 隐藏body窗口区域滚动条 */
		}
	</style>
	<!--引入three.js三维引擎-->
	<script src="./js/three.js"></script>
	<!--	引入控制插件-->
	<script src="./js/OrbitControls.js"></script>
	<!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head>

<body>
<script type="module">

  var controls, camera, scene, renderer;
  var cameraCube, sceneCube;
  var textureCube;
  var cubeMesh, sphereMesh;
  var sphereMaterial;

  function init() {

  	// CAMERAS

  	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
  	camera.position.set( 0, 0, 1000 );
  	cameraCube = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );

  	// SCENE

  	scene = new THREE.Scene();
  	sceneCube = new THREE.Scene();

  	// Lights

  	var ambient = new THREE.AmbientLight( 0xffffff );
  	scene.add( ambient );

  	// Textures

  	var r = "img/DZIMG_H/";
  	var urls = [ r + 'pano_r.jpg', r + 'pano_l.jpg',
  		r + 'pano_u.jpg', r + 'pano_d.jpg',
  		r + 'pano_f.jpg', r + 'pano_b.jpg' ];

  	textureCube = new THREE.CubeTextureLoader().load( urls );
  	textureCube.encoding = THREE.sRGBEncoding;
  	// Materials

  	var equirectShader = THREE.ShaderLib[ "equirect" ];

  	var equirectMaterial = new THREE.ShaderMaterial( {
  		fragmentShader: equirectShader.fragmentShader,
  		vertexShader: equirectShader.vertexShader,
  		uniforms: equirectShader.uniforms,
  		depthWrite: false,
  		side: THREE.BackSide
  	} );
  	// enable code injection for non-built-in material
  	Object.defineProperty( equirectMaterial, 'map', {

  		get: function () {

  			return this.uniforms.tEquirect.value;

  		}

  	} );

  	var cubeShader = THREE.ShaderLib[ "cube" ];
  	var cubeMaterial = new THREE.ShaderMaterial( {
  		fragmentShader: cubeShader.fragmentShader,
  		vertexShader: cubeShader.vertexShader,
  		uniforms: cubeShader.uniforms,
  		depthWrite: false,
  		side: THREE.BackSide
  	} );

  	cubeMaterial.envMap = textureCube;
  	console.log( cubeMaterial );

  	// Skybox
		var cubeBox = new THREE.BoxBufferGeometry( 100, 100, 100 );
  	cubeMesh = new THREE.Mesh( cubeBox, cubeMaterial );
  	sceneCube.add( cubeMesh );

  	//

  	// var geometry = new THREE.SphereBufferGeometry( 400.0, 48, 24 );
  	var geometry = new THREE.SphereBufferGeometry( 400.0, 48, 24 );
  	sphereMaterial = new THREE.MeshLambertMaterial( {
		envMap: textureCube,
  		opacity: 0.5,
  		transparent: true,
  	} );
  	sphereMesh = new THREE.Mesh( geometry, sphereMaterial );

  	scene.add( sphereMesh );

  	//

  	renderer = new THREE.WebGLRenderer();
  	renderer.autoClear = false;
  	renderer.setPixelRatio( window.devicePixelRatio );
  	renderer.setSize( window.innerWidth, window.innerHeight );
  	document.body.appendChild( renderer.domElement );

  	renderer.outputEncoding = THREE.sRGBEncoding;

  	//
  	controls = new THREE.OrbitControls( camera, renderer.domElement );
  	controls.minDistance = 500;
  	controls.maxDistance = 2500;

  	window.addEventListener( 'resize', onWindowResize, false );

  }

  function onWindowResize() {

  	camera.aspect = window.innerWidth / window.innerHeight;
  	camera.updateProjectionMatrix();

  	cameraCube.aspect = window.innerWidth / window.innerHeight;
  	cameraCube.updateProjectionMatrix();

  	renderer.setSize( window.innerWidth, window.innerHeight );

  }

  //

  function animate() {

  	requestAnimationFrame( animate );

  	render();

  }

  function render() {

  	camera.lookAt( scene.position );
  	cameraCube.rotation.copy( camera.rotation );

  	renderer.render( sceneCube, cameraCube );
  	renderer.render( scene, camera );

  }

  init();
  animate();

</script>

</body>
</html>
